<template>
  <div class="page_root" data-page-name="123" data-page-identification="v_urqqbfhjqc">
    <a-spin :spinning="false">
      <!-- begin vid_v8x4g42oqx 自定义模板_vuywrehb87 -->
      <div class="body">
        <a-card style="margin-bottom: 16px; border-right: 40px; border-radius: 5px" :bodyStyle="contractState.bodyStyle"
          :bordered="false">
          <a-form :label-col="{ span: 7 }" ref="formRef" :model="contractState.searchForm">
            <a-row>
              <a-col :span="6">
                <a-form-item label="合同类别">
                  <a-select v-model:value="contractState.searchForm.contractSource" showArrow placeholder="请选择" allowClear
                    mode="multiple" :options="[
                      { label: '国网合同', value: '国网合同' },
                      { label: '省网合同', value: '省网合同' },
                      { label: '临时合同', value: '临时合同' },
                      { label: '零售合同', value: '零售合同' }
                    ]" />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="合同标识">
                  <a-select v-model:value="contractState.searchForm.contractClass" showArrow placeholder="请选择" allowClear
                    mode="multiple" :options="[
                      { label: '框架合同', value: '框架合同' },
                      { label: '常规合同', value: '常规合同' }
                    ]" />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="项目名称">
                  <a-select v-model:value="contractState.searchForm.contractName" showArrow placeholder="请选择" allowClear
                    mode="multiple" showSearch :options="contractState.projectNameList" />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="客户单位">
                  <a-select v-model:value="contractState.searchForm.customerName" showArrow placeholder="请选择" allowClear
                    mode="multiple" :options="contractState.customerUnitList" :filter-option="(input, option) => {
                      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                      " />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="6">
                <a-form-item label="省份">
                  <a-select v-model:value="contractState.searchForm.province" showArrow placeholder="请选择" allowClear
                    mode="multiple" :options="contractState.provinceList" :filter-option="(input, option) => {
                      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                      " />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="销售人员">
                  <a-select v-model:value="contractState.searchForm.saleName" showArrow placeholder="请选择" allowClear
                    mode="multiple" :options="contractState.salePersonList" :filter-option="(input, option) => {
                      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                      " />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="合同执行状态">
                  <!-- mode="multiple" -->
                  <a-select v-model:value="contractState.searchForm.contractStatus" showArrow placeholder="请选择" allowClear
                    :options="[
                      { label: '已建立', value: '已建立' },
                      { label: '下达销售计划', value: '下达销售计划' },
                      { label: '已发货', value: '已发货' },
                      { label: '未发货', value: '未发货' },
                      { label: '关账', value: '关账' },
                      { label: '未执行', value: '未执行' },
                      { label: '未回款', value: '未回款' },
                      { label: '已开票未发货', value: '已开票未发货' },
                      { label: '预开票', value: '预开票' },
                      { label: '预回款', value: '预回款' }
                    ]" />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="交期日期">
                  <a-range-picker v-model:value="contractState.searchForm.deliveryDate" :format="'YYYY-MM-DD'"
                    :valueFormat="'YYYY-MM-DD'" :disabledDate="disabledDate" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="6">
                <a-form-item label="合同建立日期">
                  <a-range-picker v-model:value="contractState.searchForm.signDate" :format="'YYYY-MM-DD'"
                    :disabledDate="disabledDate" :valueFormat="'YYYY-MM-DD'" />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="下达销售计划日期">
                  <a-range-picker v-model:value="contractState.searchForm.salesPlanReleaseDate" :format="'YYYY-MM-DD'"
                    :disabledDate="disabledDate" :valueFormat="'YYYY-MM-DD'" />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="实际送货日期">
                  <a-range-picker v-model:value="contractState.searchForm.actualDeliveryDate" :format="'YYYY-MM-DD'"
                    :disabledDate="disabledDate" :valueFormat="'YYYY-MM-DD'" />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="最新回款日期">
                  <a-range-picker v-model:value="contractState.searchForm.paymentBackDate" :format="'YYYY-MM-DD'"
                    :disabledDate="disabledDate" :valueFormat="'YYYY-MM-DD'" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="6">
                <a-form-item label="金额履约比率">
                  <a-select v-model:value="contractState.searchForm.perforRatio" showArrow placeholder="请选择" allowClear
                    mode="multiple" :options="[
                      { label: '1%-10%', value: '1%-10%' },
                      { label: '10%-20%', value: '10%-20%' },
                      { label: '20%-30%', value: '20%-30%' },
                      { label: '30%-40%', value: '30%-40%' },
                      { label: '40%-50%', value: '40%-50%' },
                      { label: '50%-60%', value: '50%-60%' },
                      { label: '60%-70%', value: '60%-70%' },
                      { label: '70%-80%', value: '70%-80%' },
                      { label: '80%-90%', value: '80%-90%' },
                      { label: '90%-100%', value: '90%-100%' },
                      { label: '100%-110%', value: '100%-110%' },
                      { label: '110%-120%', value: '110%-120%' },
                      { label: '120%-130%', value: '120%-130%' },
                      { label: '130%-140%', value: '130%-140%' },
                      { label: '140%-150%', value: '140%-150%' },
                      { label: '150%-160%', value: '150%-160%' },
                      { label: '160%-170%', value: '160%-170%' },
                      { label: '170%-180%', value: '170%-180%' },
                      { label: '180%-190%', value: '180%-190%' },
                      { label: '190%-200%', value: '190%-200%' }
                    ]" />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="产品履约比率">
                  <a-select v-model:value="contractState.searchForm.goodsRatio" showArrow placeholder="请选择" allowClear
                    mode="multiple" :options="[
                      { label: '1%-10%', value: '1%-10%' },
                      { label: '10%-20%', value: '10%-20%' },
                      { label: '20%-30%', value: '20%-30%' },
                      { label: '30%-40%', value: '30%-40%' },
                      { label: '40%-50%', value: '40%-50%' },
                      { label: '50%-60%', value: '50%-60%' },
                      { label: '60%-70%', value: '60%-70%' },
                      { label: '70%-80%', value: '70%-80%' },
                      { label: '80%-90%', value: '80%-90%' },
                      { label: '90%-100%', value: '90%-100%' },
                      { label: '100%-110%', value: '100%-110%' },
                      { label: '110%-120%', value: '110%-120%' },
                      { label: '120%-130%', value: '120%-130%' },
                      { label: '130%-140%', value: '130%-140%' },
                      { label: '140%-150%', value: '140%-150%' },
                      { label: '150%-160%', value: '150%-160%' },
                      { label: '160%-170%', value: '160%-170%' },
                      { label: '170%-180%', value: '170%-180%' },
                      { label: '180%-190%', value: '180%-190%' },
                      { label: '190%-200%', value: '190%-200%' }
                    ]" />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="开票比率">
                  <a-select v-model:value="contractState.searchForm.invoiceRatio" showArrow placeholder="请选择" allowClear
                    mode="multiple" :options="[
                      { label: '1%-10%', value: '1%-10%' },
                      { label: '10%-20%', value: '10%-20%' },
                      { label: '20%-30%', value: '20%-30%' },
                      { label: '30%-40%', value: '30%-40%' },
                      { label: '40%-50%', value: '40%-50%' },
                      { label: '50%-60%', value: '50%-60%' },
                      { label: '60%-70%', value: '60%-70%' },
                      { label: '70%-80%', value: '70%-80%' },
                      { label: '80%-90%', value: '80%-90%' },
                      { label: '90%-100%', value: '90%-100%' }
                    ]" />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="回款比率">
                  <a-select v-model:value="contractState.searchForm.repaymentAmountRatio" showArrow placeholder="请选择"
                    allowClear mode="multiple" :options="[
                      { label: '1%-10%', value: '1%-10%' },
                      { label: '10%-20%', value: '10%-20%' },
                      { label: '20%-30%', value: '20%-30%' },
                      { label: '30%-40%', value: '30%-40%' },
                      { label: '40%-50%', value: '40%-50%' },
                      { label: '50%-60%', value: '50%-60%' },
                      { label: '60%-70%', value: '60%-70%' },
                      { label: '70%-80%', value: '70%-80%' },
                      { label: '80%-90%', value: '80%-90%' },
                      { label: '90%-100%', value: '90%-100%' }
                    ]" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
          <div class="content-title">
            <a-row>
              <a-col :span="20" />
              <a-col :span="4"
                style="display: flex; justify-content: flex-end; padding-right: 10px ;position: relative; top: -5px;">
                <a-button type="primary" @click="handleSearch">查询</a-button>
                <a-button class="btn-top" style="margin-left: 15px" @click="handleReset">重置</a-button>
              </a-col>
            </a-row>
          </div>
        </a-card>
        <!-- 表格部分 -->
        <a-card style="border-radius: 5px" :bordered="false" :bodyStyle="contractState.bodyStyle">
          <div class="contract-title">
            <a-row>
              <a-col :span="6" v-if="false" style="display: flex; justify-content: flex-end; padding-right: 11px">
                <a-button class="btn-top" @click="handlePreInvoicing">预开票</a-button>
                <a-button class="btn-top" style="margin-left: 15px" @click="handleBackPay">回款</a-button>
                <a-button class="btn-top" style="margin-left: 15px" @click="handleStatistics">统计</a-button>
              </a-col>
            </a-row>
          </div>
          <a-table :dataSource="contractState.contractData" :columns="contractState.contractColumns" bordered size="small"
            :expandedRowKeys="contractState.expandedKeys" :scroll="{ x: 'max-content' }" @expand="handleExpand"
            :row-selection="contractState.rowSelection" :pagination="pagination">
            <template #bodyCell="{ column, record, text }">
              <template v-if="column.dataIndex === 'totalAmount'">
                <span v-if="text">{{ text.toFixed(2) }}</span>
              </template>
              <template v-if="column.dataIndex === 'accountsReceivable'">
                <span v-if="text">{{ text.toFixed(2) }}</span>
              </template>
              <template v-if="column.dataIndex === 'shipmentAmount'">
                <span v-if="text">{{ text.toFixed(2) }}</span>
              </template>
              <template v-if="column.dataIndex === 'repaymentAmount'">
                <span v-if="text">{{ text.toFixed(2) }}</span>
              </template>
              <template v-if="column.dataIndex === 'invoiceAmount'">
                <span v-if="text">{{ text.toFixed(2) }}</span>
              </template>
              <template v-if="column.dataIndex === 'goodsRatio'">
                <span v-if="text">{{ (text * 100).toFixed(2) + '%' }}</span>
              </template>
              <template v-if="column.dataIndex === 'amountRatio'">
                <span v-if="text">{{ (text * 100).toFixed(2) + '%' }}</span>
              </template>
              <template v-if="column.dataIndex === 'repaymentAmountRatio'">
                <span v-if="text">{{ (text * 100).toFixed(2) + '%' }}</span>
              </template>
              <template v-if="column.dataIndex === 'invoiceAmountRatio'">
                <span v-if="text">{{ (text * 100).toFixed(2) + '%' }}</span>
              </template>
              <template v-if="column.dataIndex === 'actions'">
                <a-button v-if="true" type="link" @click="handleDetail(record)">详情</a-button>
                <a-divider v-if="true" type="vertical" />
                <a-button v-if="true" type="link" @click="handleRecord(record)">补录</a-button>
                <a-divider v-if="true" type="vertical" />
                <a-button :disabled="record.children.length == 0" @click="toggleExpand(record)" type="link">{{
                  isExpanded(record) ? '折叠' : '展开' }}</a-button>
              </template>
            </template>
          </a-table>
        </a-card>
      </div>

      <!-- 预开票弹窗 -->
      <a-modal v-model:visible="contractState.invoicingVisible" @ok="handleSubmitInvoicing" title="预开票" width="1000px">
        111 {{ contractState.editInvoicingData }}
        <a-table :dataSource="contractState.invoicingData" :columns="contractState.invoicingColumn"
          :scroll="{ x: 'max-content' }" size="small">
          <template #bodyCell="{ column, record, text }">
            <template v-if="['repaymentAmount', 'number'].includes(column.dataIndex)">
              <div>
                <a-input v-if="contractState.editInvoicingData[record.key]"
                  v-model:value="contractState.editInvoicingData[record.key][column.dataIndex]" style="margin: -5px 0" />
                <template v-else>
                  {{ text }}
                </template>
              </div>
            </template>
            <template v-if="['repaymentPurpose'].includes(column.dataIndex)">
              <div>
                <a-select v-if="contractState.editInvoicingData[record.key]" :options="[
                  { label: '预付款', value: '预付款' },
                  { label: '到货款', value: '到货款' },
                  { label: '投运款', value: '投运款' },
                  { label: '质保金', value: '质保金' },
                  { label: '无计划还款', value: '无计划还款' }
                ]" v-model:value="contractState.editInvoicingData[record.key][column.dataIndex]"
                  style="margin: -5px 0" />
                <template v-else>
                  {{ text }}
                </template>
              </div>
            </template>

            <template v-else-if="column.dataIndex === 'actions'">
              <div class="editable-row-operations">
                <span v-if="contractState.editInvoicingData[record.key]">
                  <a-typography-link style="margin-right: 5px"
                    @click="handleInvoicingSave(record.key)">保存</a-typography-link>
                  <a-popconfirm title="确定取消？" @confirm="handleInvoicingCancel(record.key)">
                    <a>取消</a>
                  </a-popconfirm>
                </span>
                <span v-else>
                  <a @click="handleInvoicingEdit(record.key)" style="margin-right: 5px">编辑</a>
                  <a @click="handleInvoicingDelete(index)">删除</a>
                </span>
              </div>
            </template>
          </template>
        </a-table>
      </a-modal>
      <!-- 预开票弹窗 -->
      <!-- 详情弹窗 -->
      <a-modal title="详情" v-model:visible="contractState.detailVisible" width="1000px"
        :bodyStyle="contractState.modalStyle" centered @cancel="handleDetailCancel" @ok="hanldeDetailSave">
        <div class="detail-body">
          <div class="detail-title"> 基础信息</div>
          <table>
            <tr>
              <th>联接组别</th>
              <td>{{ contractState.detailMessage.connectionGroup }}</td>
              <th>电压组合</th>
              <td>{{ contractState.detailMessage.voltageCombination }}</td>
              <th>协议号</th>
              <td>{{ contractState.detailMessage.protocolNumber }}</td>
              <th>工程账号</th>
              <td>{{ contractState.detailMessage.engineeringAccount }}</td>
            </tr>
            <tr>
              <th>产品来源</th>
              <td>{{ contractState.detailMessage.productSource }}</td>
              <th>常规名称</th>
              <td>{{ contractState.detailMessage.generalName }}</td>
              <th>产品容量</th>
              <td>{{ contractState.detailMessage.productCapacity }}</td>
              <th>产品类别</th>
              <td>{{ contractState.detailMessage.productType }}</td>
            </tr>
            <tr>
              <th>登记日期</th>
              <td>{{
                contractState.detailMessage.registrationTime
                ? dayjs(contractState.detailMessage.registrationTime).format('YYYY-MM-DD')
                : ''
              }}</td>
              <th>质保期限</th>
              <td>{{ contractState.detailMessage.warrantyPeriod }}</td>
              <th>质量标准</th>
              <td>{{ contractState.detailMessage.qualityStandard }}</td>
              <th>运输方式</th>
              <td>{{ contractState.detailMessage.transportationMethod }}</td>
            </tr>
            <tr>
              <th>运输费用</th>
              <td>{{ contractState.detailMessage.transportationCosts }}</td>
              <th>预付款</th>
              <td>{{ contractState.detailMessage.advancePayment }}</td>
              <th></th>
              <td></td>
              <th></th>
              <td></td>
            </tr>
          </table>
          <div class="detail-title"> 合同设备清单</div>
          <a-table bordered :columns="contractState.detailColumns" :dataSource="contractState.detailDataSource"
            :scroll="{ x: 'max-content' }" size="middle">
            <template #bodyCell="{ column, record, text }">
              <template v-if="column.dataIndex === 'productPrice'">
                <span v-if="text">{{ text.toFixed(2) }}</span>
              </template>
              <template v-if="column.dataIndex === 'productPriceNoTaxRate'">
                <span v-if="text">{{ text.toFixed(2) }}</span>
              </template>
              <template v-if="column.dataIndex === 'productTotalAmount'">
                <span v-if="text">{{ text.toFixed(2) }}</span>
              </template>
              <template v-if="column.dataIndex === 'productTotalAmountNoTaxRate'">
                <span v-if="text">{{ text.toFixed(2) }}</span>
              </template>
            </template>
          </a-table>
          <div class="detail-note">
            <div class="detail-title"> 备注</div>
            <a-textarea rows="4" v-model:value="contractState.detailNote" placeholder="请输入" allow-clear />
          </div>
          <div class="detail-check">
            当前合同执行状态：
            <a-radio-group v-model:value="contractState.detailType" name="radioGroup"
              v-if="contractState.contractDetailType === '框架合同'">
              <a-radio value="履约中">履约中</a-radio>
              <a-radio value="已完成">已完成</a-radio>
            </a-radio-group>
            <a-radio-group v-model:value="contractState.detailType" name="radioGroup" v-else>
              <a-radio value="已建立">已建立</a-radio>
              <a-radio value="下达销售计划">下达销售计划</a-radio>
              <a-radio value="已发货">已发货</a-radio>
              <a-radio value="关账">关账</a-radio>
            </a-radio-group>
          </div>
        </div>
      </a-modal>
      <!-- 详情取消提示框 -->
      <a-modal v-model:visible="contractState.tipVisible" @ok="handleCancelOk">
        <p style="height: 150px; text-align: center; line-height: 150px">取消后将不保存当前数据，确认是否继续？</p>
      </a-modal>
      <!-- 详情取消提示框 -->
      <!-- 详情弹窗 -->
      <!-- 记录弹窗 -->
      <a-modal v-model:visible="contractState.recordVisible" width="1000px" @cancel="contractState.activeKey = '1'"
        :bodyStyle="contractState.modalStyle" centered>
        <div class="record-body">
          <a-tabs v-model:activeKey="contractState.activeKey">
            <a-tab-pane key="1" tab="预开票记录">
              <a-table :columns="contractState.preInvoicingColumn" :dataSource="contractState.preInvoicingDataSource"
                bordered size="middle">
                <template #bodyCell="{ column, text, record, index }">
                  <template v-if="['invoiceAmount', 'invoiceCode', 'isFitRepayment'].includes(
                    column.dataIndex
                  )
                    ">
                    <div>
                      <a-input v-if="contractState.editableData[record.key]"
                        v-model:value="contractState.editableData[record.key][column.dataIndex]" style="margin: -5px 0" />
                      <template v-else>
                        {{ text }}
                      </template>
                    </div>
                  </template>
                  <template v-else-if="['yes'].includes(column.dataIndex)">
                    <div>
                      <a-select v-if="contractState.editableData[record.key]"
                        v-model:value="contractState.editableData[record.key][column.dataIndex]" style="margin: -5px 0"
                        :options="[
                          { label: '是', value: '是' },
                          { label: '否', value: '否' }
                        ]" />
                      <template v-else>
                        {{ text }}
                      </template>
                    </div>
                  </template>

                  <template v-else-if="column.dataIndex === 'actions'">
                    <div class="editable-row-operations">
                      <span v-if="contractState.editableData[record.key]">
                        <a-typography-link style="margin-right: 5px"
                          @click="preInvoicingSave(record.key)">保存</a-typography-link>
                        <a-popconfirm title="确定取消？" @confirm="preInvoicingCancel(record.key)">
                          <a>取消</a>
                        </a-popconfirm>
                      </span>
                      <span v-else>
                        <a @click="preInvoicingEdit(record.key)" style="margin-right: 5px">编辑</a>
                        <a @click="preInvoicingDelete(index)">删除</a>
                      </span>
                    </div>
                  </template>
                </template>
              </a-table>
            </a-tab-pane>
            <a-tab-pane key="2" tab="回款记录" force-render>
              <table style="height: 20px; margin-bottom: 20px" size="middle">
                <tr>
                  <td style="text-align: center; width: 50%">已录入预回款金额</td>
                  <td style="text-align: center"><span v-if="contractState.repaymentAmount">{{
                    contractState.repaymentAmount + '元'
                  }}</span></td>
                </tr>
              </table>
              <!-- 回款记录表格 -->
              <a-table :columns="contractState.collectionRecordsColumn"
                :dataSource="contractState.collectionRecordsDataSource" :scroll="{ x: 'max-content' }" size="middle">
                <template #bodyCell="{ column, text, record, index }">
                  <template v-if="['repaymentAmount'].includes(column.dataIndex)">
                    <div>
                      <a-input v-if="contractState.edicollectionData[record.key]" v-model:value="contractState.edicollectionData[record.key][column.dataIndex]
                        " style="margin: -5px 0" />
                      <template v-else>
                        {{ text }}
                      </template>
                    </div>
                  </template>
                  <template v-if="['invoiceCollectionRatio'].includes(column.dataIndex)">
                    <div>
                      <a-input v-if="contractState.edicollectionData[record.key]" v-model:value="contractState.edicollectionData[record.key][column.dataIndex]
                        " style="margin: -5px 0" />
                      <template v-else>
                        <span v-if="text">{{ (text * 100).toFixed(2) + '%' }}</span>
                      </template>
                    </div>
                  </template>
                  <!-- <template v-else-if="['yesNo'].includes(column.dataIndex)">
                    <div>
                      <a-select v-if="contractState.edicollectionData[record.key]" v-model:value="contractState.edicollectionData[record.key][column.dataIndex]
                        " style="margin: -5px 0" :options="[
    { label: '是', value: '是' },
    { label: '否', value: '否' }
  ]" />
                      <template v-else>
                        {{ text }}
                      </template>
                    </div>
                  </template> -->
                  <template v-else-if="['repaymentPurpose'].includes(column.dataIndex)">
                    <div>
                      <a-select v-if="contractState.edicollectionData[record.key]" v-model:value="contractState.edicollectionData[record.key][column.dataIndex]
                        " style="margin: -5px 0" :options="[
    { label: '现金', value: '现金' },
    { label: '电子承兑', value: '电子承兑' }
  ]" />
                      <template v-else>
                        {{ text }}
                      </template>
                    </div>
                  </template>
                  <template v-else-if="['repaymentWay'].includes(column.dataIndex)">
                    <div>
                      <a-select v-if="contractState.edicollectionData[record.key]" v-model:value="contractState.edicollectionData[record.key][column.dataIndex]
                        " style="margin: -5px 0" :options="[
    { label: '预付款', value: '预付款' },
    { label: '到货款', value: '到货款' },
    { label: '投运款', value: '投运款' },
    { label: '质保金', value: '质保金' },
    { label: '无计划还款', value: '无计划还款' }
  ]" />
                      <template v-else>
                        {{ text }}
                      </template>
                    </div>
                  </template>
                  <template v-else-if="['repaymentDate'].includes(column.dataIndex)">
                    <div>
                      <a-date-picker :format="'YYYY-MM-DD'" :valueFormat="'YYYY-MM-DD'"
                        v-if="contractState.edicollectionData[record.key]" v-model:value="contractState.edicollectionData[record.key][column.dataIndex]
                          " style="margin: -5px 0" />
                      <template v-else>
                        {{ text }}
                      </template>
                    </div>
                  </template>
                  <template v-else-if="column.dataIndex === 'actions'">
                    <div class="editable-row-operations">
                      <span v-if="contractState.edicollectionData[record.key]">
                        <a-typography-link style="margin-right: 5px"
                          @click="handleCollectionDataSave(record.key)">保存</a-typography-link>
                        <a-popconfirm title="确定取消？" @confirm="preInvoicingCancel(record.key)">
                          <a>取消</a>
                        </a-popconfirm>
                      </span>
                      <span v-else>
                        <a @click="handleCollectionDataEdit(record.key)" style="margin-right: 5px">编辑</a>
                        <a @click="handleCollectionDataDelete(index)">删除</a>
                      </span>
                    </div>
                  </template>
                </template>
              </a-table>
            </a-tab-pane>
            <a-tab-pane key="3" tab="发货记录">
              <a-table :columns="contractState.shippingRecordColumn" :dataSource="contractState.shippingRecordDataSource"
                :scroll="{ x: 'max-content' }" size="middle" bordered />
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-modal>
      <!-- 记录弹窗 -->

      <!-- 统计弹窗 -->
      <a-modal v-model:visible="contractState.statisticsVisible" title="统计结果" ok-text="导出" cancelText="关闭" width="600px">
        <table class="statistics-table">
          <tr>
            <th>合同总金额</th>
            <td></td>
            <th>应收账款</th>
            <td></td>
          </tr>
          <tr>
            <th>综合金额履约比率</th>
            <td></td>
            <th>综合产品履约比率</th>
            <td></td>
          </tr>
          <tr>
            <th>发货总量</th>
            <td></td>
            <th>发货金额</th>
            <td></td>
          </tr>
          <tr>
            <th>开票总金额</th>
            <td></td>
            <th>综合开票比率</th>
            <td></td>
          </tr>
          <tr>
            <th>回款总金额</th>
            <td></td>
            <th>综合回款比率</th>
            <td></td>
          </tr>
        </table>
      </a-modal>
      <!-- 统计弹窗 -->
      <!-- 回款弹窗 -->
      <a-modal v-model:visible="contractState.backPayVisible" title="回款" width="1000px" :scroll="{ x: '800' }">
        <a-table :columns="contractState.backPayColumns" :dataSource="backPayDataSource" :scroll="{ x: 'max-content' }"
          size="middle">
          <template #bodyCell="{ column, record, text }">
            <template v-if="['repaymentAmount', 'number'].includes(column.dataIndex)">
              <div>
                <a-input v-if="contractState.editBackPayData[record.key]"
                  v-model:value="contractState.editBackPayData[record.key][column.dataIndex]" style="margin: -5px 0" />
                <template v-else>
                  {{ text }}
                </template>
              </div>
            </template>
            <template v-if="['repaymentPurpose'].includes(column.dataIndex)">
              <div>
                <a-select v-if="contractState.editBackPayData[record.key]" :options="[
                  { label: '预付款', value: '预付款' },
                  { label: '到货款', value: '到货款' },
                  { label: '投运款', value: '投运款' },
                  { label: '质保金', value: '质保金' },
                  { label: '无计划还款', value: '无计划还款' }
                ]" v-model:value="contractState.editBackPayData[record.key][column.dataIndex]"
                  style="margin: -5px 0" />
                <template v-else>
                  {{ text }}
                </template>
              </div>
            </template>

            <template v-else-if="column.dataIndex === 'actions'">
              <div class="editable-row-operations">
                <span v-if="contractState.editBackPayData[record.key]">
                  <a-typography-link style="margin-right: 5px"
                    @click="handlePayBackSave(record.key)">保存</a-typography-link>
                  <a-popconfirm title="确定取消？" @confirm="handlePayBackCancel(record.key)">
                    <a>取消</a>
                  </a-popconfirm>
                </span>
                <span v-else>
                  <a @click="handlePayBackEdit(record.key)" style="margin-right: 5px">编辑</a>
                  <a @click="handlePayBackDelete(index)">删除</a>
                </span>
              </div>
            </template>
          </template>
        </a-table>
      </a-modal>
      <!-- 回款弹窗 -->
      <!-- end vid_v8x4g42oqx 自定义模板_vuywrehb87 -->
    </a-spin>
  </div>
</template>
<script setup>
import {
  h,
  ref,
  reactive,
  toRaw,
  markRaw,
  watch,
  computed,
  onBeforeMount,
  onMounted,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
import {
  cloneDeep,
  isNullOrEmpty,
  isEmptyArr,
  isNullOrUnDef,
  localGet,
  isContained,
  isArray,
  isEmpty,
  merge,
  getDifferenceArray,
  isObject,
  traversalTreeStructure,
  checkCaseCondition,
  renderStringInTemplate,
  handleBreadcrumbJump,
  throttle
} from '@/utils/index'
import dayjs from 'dayjs'
import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format'

import { message, notification, Modal } from 'ant-design-vue'
// 获取传入的流程ID
const immediateWatch = (source, callback) => {
  watch(source, callback, { deep: true, immediate: true })
}

// ---------------------------- 页面参数 ----------------------------
const contractState = reactive({
  bodyStyle: { paddingBottom: 0, paddingTop: '10px' },
  modalStyle: { height: '800px' },
  // 项目名称列表
  projectNameList: [],
  // 客户单位列表
  customerUnitList: [],
  // 省份列表
  provinceList: [],
  // 搜索表单
  searchForm: {
    // 合同类型
    contractSource: [],
    // 合同标识
    contractClass: [],
    // 客户类型
    contractSource: [],
    // 项目名称
    contractName: [],
    // 客户单位
    customerName: [],
    // 省份
    province: [],
    // 销售人员
    saleName: [],
    // 合同执行状态
    // contractStatus: [],
    // 先传字符串后续后端支持再传数组
    contractStatus: '',
    // 交期日期
    deliveryDate: [],
    // 合同建立日期
    signDate: [],
    // 下达日期
    salesPlanReleaseDate: [],
    // 送货日期
    actualDeliveryDate: [],
    // 回款日期
    paymentBackDate: [],
    // 合同履约比率
    perforRatio: [],
    // 开票比率
    invoiceRatio: [],
    // 回款比率
    repaymentAmountRatio: []
  },
  // 合同列表展开的行
  expandedKeys: [],
  // 合同列表表格数据
  contractData: [],
  // 合同列表表头
  contractColumns: [
    {
      title: '合同/订单编号',
      width: '220px',
      align: 'center',
      dataIndex: 'contractCode',
      ellipsis: true,
      fixed: 'left'
    },
    { title: '合同类别', align: 'center', dataIndex: 'contractSource', fixed: 'left' },
    { title: '合同标识', align: 'center', dataIndex: 'contractClass', fixed: 'left' },
    { title: '客户单位', align: 'center', dataIndex: 'customerName', ellipsis: true, width: '150px' },
    { title: '省份', align: 'center', dataIndex: 'province' },
    { title: '订单数', align: 'center', dataIndex: 'orderNum' },
    { title: '合同金额（元）', align: 'center', dataIndex: 'totalAmount' },
    { title: '应收账款（元）', align: 'center', dataIndex: 'accountsReceivable' },
    { title: '金额履约比率', align: 'center', dataIndex: 'amountRatio' },
    { title: '产品履约比率', align: 'center', dataIndex: 'goodsRatio' },
    { title: '发货总量', align: 'center', dataIndex: 'outGoogsQuality' },
    { title: '发货金额（元）', align: 'center', dataIndex: 'shipmentAmount' },
    { title: '回款金额（元）', align: 'center', dataIndex: 'repaymentAmount' },
    { title: '回款比率', align: 'center', dataIndex: 'repaymentAmountRatio' },
    { title: '开票金额（元）', align: 'center', dataIndex: 'invoiceAmount' },
    { title: '开票比率', align: 'center', dataIndex: 'invoiceAmountRatio' },
    { title: '销售人员', align: 'center', dataIndex: 'saleName' },
    { title: '合同执行状态', align: 'center', dataIndex: 'contractStatus' },
    {
      title: '合同建立日期',
      align: 'center',
      dataIndex: 'signDate',
      sorter: (a, b) => dayjs(a.signDate).unix() - dayjs(b.signDate).unix(),
      defaultSortOrder: 'ascend'
    },
    {
      title: '下达销售计划日期',
      align: 'center',
      dataIndex: 'salesPlanReleaseDate',
      sorter: (a, b) => dayjs(a.salesPlanReleaseDate).unix() - dayjs(b.salesPlanReleaseDate).unix(),
      defaultSortOrder: 'ascend'
    },
    {
      title: '最新回款日期',
      align: 'center',
      dataIndex: 'paymentBackDate',
      sorter: (a, b) => dayjs(a.paymentBackDate).unix() - dayjs(b.paymentBackDate).unix(),
      defaultSortOrder: 'ascend'
    },
    {
      title: '实际送货日期',
      align: 'center',
      dataIndex: 'actualDeliveryDate',
      sorter: (a, b) => dayjs(a.actualDeliveryDate).unix() - dayjs(b.actualDeliveryDate).unix(),
      defaultSortOrder: 'ascend'
    },
    {
      title: '交货日期',
      align: 'center',
      dataIndex: 'deliveryDate',
      sorter: (a, b) => dayjs(a.deliveryDate).unix() - dayjs(b.deliveryDate).unix(),
      defaultSortOrder: 'ascend'
    },
    {
      title: '操作',
      width: '250px',
      align: 'center',
      dataIndex: 'actions',
      fixed: 'right'
    }
  ],
  // 合同列表选中属性
  rowSelection: {
    type: 'checkbox',
    checkStrictly: false,
    selectedRowKeys: [],
    onChange: selectedRowKeys => {
      // 更新已选择的行
      contractState.rowSelection.selectedRowKeys = selectedRowKeys
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      console.log(selected, selectedRows, changeRows)
    }
  },
  // 预开票表格数据
  invoicingData: [
    {
      key: '1',
      repaymentAmount: 90,
      number: 98876555,
      repaymentPurpose: '预付款'
    }
  ],
  // 预开票编辑表格数据
  editInvoicingData: [],
  // 预开票表头
  invoicingColumn: [
    {
      title: '合同/订单编号',
      width: '220px',
      align: 'center',
      dataIndex: 'contractNumber',
      ellipsis: true,
      fixed: 'left'
    },
    { title: '客户单位', align: 'center', dataIndex: 'customerUnit', ellipsis: true, width: '150px' },
    { title: '已开票金额（元）', align: 'center', dataIndex: 'customerUnit', ellipsis: true },
    { title: '未开票金额（元）', align: 'center', dataIndex: 'customerUnit', ellipsis: true },
    { title: '开票比率', align: 'center', dataIndex: 'customerUnit', ellipsis: true },
    { title: '回款阶段', align: 'center', dataIndex: 'repaymentPurpose', ellipsis: true, width: '150px' },
    { title: '发票号码', align: 'center', dataIndex: 'number', ellipsis: true, width: '150px' },
    {
      title: '预开票金额（元）',
      align: 'center',
      dataIndex: 'repaymentAmount',
      ellipsis: true,
      width: '150px'
    },
    { title: '操作', align: 'center', dataIndex: 'actions', ellipsis: true, width: '150px' }
  ],
  // 详情表头
  detailColumns: [
    {
      title: '货物名称',
      dataIndex: 'productName',
      fixed: 'left',
      align: 'center',
      ellipsis: true
    },
    {
      title: '货物描述',
      dataIndex: 'goodsDescription',
      align: 'center',
      ellipsis: true
    },
    {
      title: '单价（含税）(人民币价格)（元）',
      dataIndex: 'productPrice',
      align: 'center',
      ellipsis: true
    },
    {
      title: '单价（不含税）(人民币价格)（元）',
      dataIndex: 'productPriceNoTaxRate',
      align: 'center',
      ellipsis: true
    },
    {
      title: '单位',
      dataIndex: 'unit',
      align: 'center',
      ellipsis: true
    },
    {
      title: '数量',
      dataIndex: 'productNum',
      align: 'center',
      ellipsis: true
    },
    {
      title: '总价（含税）（人民币元）（元）',
      dataIndex: 'productTotalAmount',
      align: 'center',
      ellipsis: true
    },
    {
      title: '总价（不含税）（人民币元）（元）',
      dataIndex: 'productTotalAmountNoTaxRate',
      align: 'center',
      ellipsis: true
    },
    {
      title: '税率',
      dataIndex: 'taxRate',
      align: 'center',
      ellipsis: true
    },
    {
      title: '交货地点',
      dataIndex: 'deliveryLocation',
      align: 'center',
      ellipsis: true
    },
    {
      title: '交货方式',
      dataIndex: 'deliveryMethod',
      align: 'center',
      ellipsis: true
    }
  ],
  // 详情表格数据
  detailDataSource: [],
  // 详情-基础信息
  detailMessage: {
    // 预付款
    advancePayment: '',
    // 常规名称
    generalName: '',
    // 联接组别
    connectionGroup: '',
    // 工程账号
    engineeringAccount: '',
    //产品容量
    productCapacity: '',
    // 产品来源
    productSource: '',
    // 产品类别
    productType: '',
    // 协议号
    protocolNumber: '',
    // 质量标准
    qualityStandard: '',

    // 登记日期
    registrationTime: '',
    // 运输费用
    transportationCosts: '',
    // 运输方式
    transportationMethod: '',
    // 电压组合
    voltageCombination: '',
    // 质保期限
    warrantyPeriod: ''
  },
  // 预开票弹窗
  invoicingVisible: false,
  // 详情弹窗
  detailVisible: false,
  // 详情的数据的key
  detailKey: '',
  // 弹窗样式
  // 详情取消确认框
  tipVisible: false,
  // 详情备注
  detailNote: '',
  // 详情-当前合同执行状态
  detailType: '',
  // 详情选择框判断标识
  contractDetailType: '',
  // 记录弹窗
  recordVisible: false,
  // 记录tab
  activeKey: '1',
  // 记录-预开票记录表头
  preInvoicingColumn: [
    { title: '开票金额（元）', dataIndex: 'invoiceAmount', align: 'center' },
    { title: '发票号码', dataIndex: 'invoiceCode', align: 'center', ellipsis: true },
    { title: '回款阶段', dataIndex: 'invoicePurpose', align: 'center', ellipsis: true },
    { title: '是否允许对应回款', dataIndex: 'isFitRepayment', align: 'center', ellipsis: true },
    { title: '操作日期', dataIndex: 'operationTime', align: 'center', ellipsis: true },
    { title: '操作人员', dataIndex: 'operator', align: 'center', ellipsis: true }
    // { title: '操作', dataIndex: '', align: 'center', ellipsis: true }
  ],
  // 记录-预开票表格数据
  preInvoicingDataSource: [],
  // 记录-编辑预开票的数据
  editableData: [],
  // 记录-回款记录表头
  collectionRecordsColumn: [
    { title: '发票号码或预回款', dataIndex: 'invoiceCode' },
    { title: '发票已回款金额（元）', dataIndex: 'invoiceAmount' },
    { title: '开票日期', dataIndex: 'invoiceDate' },
    { title: '发票回款率', dataIndex: 'invoiceCollectionRatio' },
    { title: '发票金额（元）', dataIndex: 'invoiceAmount' },
    { title: '回款阶段', dataIndex: 'repaymentPurpose' },
    { title: '实际回款日期', dataIndex: 'repaymentDate' },
    { title: '回款方式', dataIndex: 'repaymentWay' },
    { title: '回款金额（元）', dataIndex: 'repaymentAmount' },
    { title: '操作日期', dataIndex: 'operationTime' },
    { title: '操作人员', dataIndex: 'operator' }
    // { title: '操作', dataIndex: '' }
  ],
  // 记录-回款记录数据
  collectionRecordsDataSource: [],
  // 记录-编辑回款记录数据
  edicollectionData: [],
  // 记录-发货记录表头
  shippingRecordColumn: [
    {
      title: '发货单编码',
      fixed: 'left',
      dataIndex: 'deliveryCode',
      customCell: ({ rowSpan }) => {
        return {
          rowSpan: rowSpan
        }
      }
    },
    {
      title: '实际发货数量',
      dataIndex: 'deliveryNum',
      customCell: ({ rowSpan }) => {
        return {
          rowSpan: rowSpan
        }
      }
    },
    {
      title: '发货日期',
      dataIndex: 'deliveryDate',
      customCell: ({ rowSpan }) => {
        return {
          rowSpan: rowSpan
        }
      }
    },
    {
      title: '操作人员',
      dataIndex: 'operator',
      customCell: ({ rowSpan }) => {
        return {
          rowSpan: rowSpan
        }
      }
    },
    { title: '操作日期', dataIndex: 'operationTime' },
    { title: '产品名称', dataIndex: 'productName' },
    { title: '产品类型', dataIndex: 'deliveryType' },
    { title: '生产令牌/出厂序号', dataIndex: 'productToken' }
  ],
  // 记录-发货记录表格数据
  shippingRecordDataSource: [],
  // 记录-已录入预回款金额
  repaymentAmount: '',
  // 统计-统计弹窗
  statisticsVisible: false,
  // 回款弹窗
  backPayVisible: false,
  // 回款表头
  backPayColumns: [
    { title: '合同/订单编号', dataIndex: '', align: 'center', ellipsis: true },
    { title: '客户单位', dataIndex: '', align: 'center' },
    { title: '开票金额（元）', dataIndex: 'invoiceAmount', align: 'center' },
    { title: '开票比率', dataIndex: '', align: 'center' },
    { title: '已回款金额（元）', dataIndex: 'invoiceRefundedAmount', align: 'center' },
    { title: '回款比率', dataIndex: '', align: 'center' },
    { title: '已录入预回款金额（元）', dataIndex: '', align: 'center' },
    { title: '选择发票号码或者预回款', dataIndex: '', align: 'center' },
    { title: '发票已回款金额（元）', dataIndex: '', align: 'center' },
    { title: '开票日期', dataIndex: 'invoiceDate', align: 'center' },
    { title: '发票回款比率', dataIndex: 'invoiceCollectionRatio', align: 'center' },
    { title: '发票金额', dataIndex: '', align: 'center' },
    { title: '回款阶段', dataIndex: 'repaymentPurpose', align: 'center' },
    { title: '实际回款日期', dataIndex: 'repaymentDate', align: 'center' },
    { title: '回款方式', dataIndex: 'repaymentWay', align: 'center' },
    { title: '回款金额（元）', dataIndex: 'repaymentAmount', align: 'center' },
    { title: '操作', dataIndex: 'actions', align: 'center' }
  ],
  // 回款表格数据
  backPayDataSource: [{}],
  // 回款表格编辑数据
  editBackPayData: []
})
const formRef = ref(null)
// 分页方法
const pageSizeChange = (current, size) => {
  pagination.value.current = current
  pagination.value.pageSize = size
  getContractTableData()
}
const pageChange = (page, pageSize) => {
  pagination.value.current = page
  pagination.value.pageSize = pageSize
  getContractTableData()
}
// 分页信息
const pagination = ref({
  current: 1,
  pageSize: 10,
  showSizeChanger: true,
  total: 0,
  pageSizeOptions: ['5', '10', '20', '30', '40', '100'],
  showTotal: total => `共 ${total} 条数据`,
  onShowSizeChange: pageSizeChange,
  onChange: pageChange
})

// ============================ 页面参数 ============================

// ---------------------------- 组件事件处理方法 ----------------------------
// 获取项目名称
function getProjectNameList() { }
//获取省份
function getProvinceList() { }
// 获取销售人员
function getSalePersonList() { }
// 不可选的日期
function disabledDate(date) {
  const startDate = dayjs('2000-01-01')
  const endDate = dayjs() // 当前日期
  // 禁用早于开始日期和晚于结束日期的日期
  return date.isBefore(startDate) || date.isAfter(endDate)
}
// 获取合同列表数据
const getContractTableData = () => {
  const params = {
    pageNo: pagination.value.current,
    pageSize: pagination.value.pageSize,
    contractCode: '',
    // 合同类别
    contractSource: contractState.searchForm.contractSource ? contractState.searchForm.contractSource : [],
    // 合同标识
    contractClass: contractState.searchForm.contractClass ? contractState.searchForm.contractClass : [],
    // 项目名称
    contractName: contractState.searchForm.contractName ? contractState.searchForm.contractName : [],
    // 客户单位
    customerName: contractState.searchForm.customerName ? contractState.searchForm.customerName : [],
    // 省份
    province: contractState.searchForm.province ? contractState.searchForm.province : [],
    // 销售人员
    saleName: contractState.searchForm.saleName ? contractState.searchForm.saleName : [],
    // 合同执行状态 先传字符串后端支持后再改为数组
    contractStatus: contractState.searchForm.contractStatus ? contractState.searchForm.contractStatus : '',
    // 交期日期
    deliveryDate: contractState.searchForm.deliveryDate ? contractState.searchForm.deliveryDate : [],
    // 合同建立日期
    signDate: contractState.searchForm.signDate ? contractState.searchForm.signDate : [],
    // 下达销售计划日期
    salesPlanReleaseDate: contractState.searchForm.salesPlanReleaseDate
      ? contractState.searchForm.salesPlanReleaseDate
      : [],
    // 送货日期
    actualDeliveryDate: contractState.searchForm.actualDeliveryDate
      ? contractState.searchForm.actualDeliveryDate
      : [],
    // 最新回款日期
    paymentBackDate: contractState.searchForm.paymentBackDate ? contractState.searchForm.paymentBackDate : [],
    // 金额履约比率
    perforRatio: contractState.searchForm.perforRatio ? contractState.searchForm.perforRatio : [],
    // 产品履约比率
    goodsRatio: contractState.searchForm.goodsRatio ? contractState.searchForm.goodsRatio : [],
    // 开票比率
    invoiceRatio: contractState.searchForm.invoiceRatio ? contractState.searchForm.invoiceRatio : [],
    // 回款比率
    repaymentAmountRatio: contractState.searchForm.repaymentAmountRatio
      ? contractState.searchForm.repaymentAmountRatio
      : []
  }
  post('/solution-wb/api/v1/contract/page_list', params).then(data => {
    contractState.contractData = data.dataList
    pagination.value.total = data.totalElements
  })
}
// 获取下拉框数据--客户单位-省份-销售人员
const getDictionaryData = () => {
  post('/solution-wb/api/v1/contract/option_list/contractName').then(data => {
    contractState.projectNameList = data.map(item => {
      return {
        label: item,
        value: item
      }
    })
  })
  post('/solution-wb/api/v1/contract/option_list/customerName').then(data => {
    contractState.customerUnitList = data.map(item => {
      return {
        label: item,
        value: item
      }
    })
  })
  post('/solution-wb/api/v1/contract/option_list/province').then(data => {
    contractState.provinceList = data.map(item => {
      return {
        label: item,
        value: item
      }
    })
  })
  post('/solution-wb/api/v1/contract/option_list/saleName').then(data => {
    contractState.salePersonList = data.map(item => {
      return {
        label: item,
        value: item
      }
    })
  })
}
// 搜索
const handleSearch = () => {
  getContractTableData()
}
//  重置
const handleReset = () => {
  contractState.searchForm = {
    // 合同类型
    contractSource: [],
    // 合同标识
    contractClass: [],
    // 客户类型
    contractSource: [],
    // 项目名称
    contractName: [],
    // 客户单位
    customerUnit: [],
    // 省份
    province: [],
    // 销售人员
    saleName: [],
    // 合同执行状态 先改成字符串
    contractStatus: '',
    // 交期日期
    deliveryDate: [],
    // 合同建立日期
    signDate: [],
    // 下达日期
    salesPlanReleaseDate: [],
    // 送货日期
    actualDeliveryDate: [],
    // 回款日期
    paymentCollectionTime: [],
    // 合同履约比率
    perforRatio: [],
    // 开票比率
    invoiceRatio: [],
    // 回款比率
    repaymentAmountRatio: []
  }
  getContractTableData()
}

// 合同列表展开方法
const handleExpand = (expanded, record) => {
  if (expanded) {
    contractState.expandedKeys.push(record.key)
  } else {
    const index = contractState.expandedKeys.indexOf(record.key)
    if (index > -1) {
      contractState.expandedKeys.splice(index, 1)
    }
  }
}
// 合同列表展开方法
const toggleExpand = record => {
  const index = contractState.expandedKeys.indexOf(record.key)
  if (index > -1) {
    contractState.expandedKeys.splice(index, 1)
  } else {
    contractState.expandedKeys.push(record.key)
  }
}
// 合同列表展开方法
const isExpanded = record => {
  return contractState.expandedKeys.includes(record.key)
}
// 预开票按钮事件
const handlePreInvoicing = () => {
  contractState.invoicingVisible = true
}
// 回款按钮
const handleBackPay = () => {
  contractState.backPayVisible = true
}
// 统计按钮
const handleStatistics = () => {
  contractState.statisticsVisible = true
}
// 详情按钮
const handleDetail = record => {
  contractState.detailKey = record.key
  contractState.contractDetailType = record.contractClass
  post(`/solution-wb/api/v1/contract/${record.key}`).then(data => {
    contractState.detailMessage.advancePayment = data.advancePayment
    contractState.detailMessage.engineeringAccount = data.engineeringAccount
    contractState.detailMessage.connectionGroup = data.connectionGroup
    contractState.detailMessage.generalName = data.generalName
    contractState.detailMessage.productCapacity = data.productCapacity
    contractState.detailMessage.productSource = data.productSource
    contractState.detailMessage.productType = data.productType
    contractState.detailMessage.protocolNumber = data.protocolNumber
    contractState.detailMessage.qualityStandard = data.qualityStandard
    contractState.detailMessage.registrationTime = data.registrationTime
    contractState.detailMessage.transportationCosts = data.transportationCosts
    contractState.detailMessage.voltageCombination = data.voltageCombination
    contractState.detailMessage.transportationMethod = data.transportationMethod
    contractState.detailMessage.warrantyPeriod = data.warrantyPeriod
    contractState.detailNote = data.description
    contractState.detailVisible = true
    contractState.detailDataSource = data.contractEquipmentDtoList
    contractState.detailType = data.contractStatus
      ? data.contractStatus
      : contractState.contractDetailType === '框架合同'
        ? '履约中'
        : '已建立'
  })
}
// 详情取消按钮
const handleDetailCancel = () => {
  if (contractState.detailNote) {
    contractState.detailVisible = true
    contractState.tipVisible = true
  }
}
//详情提示关闭的确定按钮
const handleCancelOk = () => {
  contractState.tipVisible = false
  contractState.detailVisible = false
  contractState.detailNote = ''
}
// 详情保存
const hanldeDetailSave = () => {
  const params = {
    description: contractState.detailNote,
    status: contractState.detailType
  }
  post(`/solution-wb/api/v1/contract/update_details/${contractState.detailKey}`, params).then(data => {
    contractState.detailVisible = false
    getContractTableData()
  })
}
// 记录按钮
const handleRecord = recorde => {
  post(`/solution-wb/api/v1/contract//record/${recorde.key}`).then(data => {
    contractState.recordVisible = true
    contractState.preInvoicingDataSource = data.invoiceDtoList
    contractState.collectionRecordsDataSource = data.repaymentDtoList
    contractState.shippingRecordDataSource = data.deliverGoodsDtoList
    groupData(contractState.shippingRecordDataSource)
    contractState.repaymentAmount = data.repaymentAmount
  })
}
// 合并记录-发货记录
function groupData(data) {
  let currentDeliveryCode = ''
  let currentDeliveryNum = ''
  let currentDeliveryDate = ''
  let currentOperator = ''
  return data.map((item, index) => {
    if (
      currentDeliveryCode !== item.deliveryCode ||
      currentDeliveryNum !== item.deliveryNum ||
      currentDeliveryDate !== item.deliveryDate ||
      currentOperator !== item.operator
    ) {
      currentDeliveryCode = item.deliveryCode
      currentDeliveryNum = item.deliveryNum
      currentDeliveryDate = item.deliveryDate
      currentOperator = item.operator
      let rowSpan = 0
      for (let i = 0; i < data.length; i++) {
        if (i >= index) {
          const currentItem = data[i]
          if (
            currentDeliveryCode === currentItem.deliveryCode &&
            currentDeliveryNum === currentItem.deliveryNum &&
            currentDeliveryDate === currentItem.deliveryDate &&
            currentOperator === currentItem.operator
          ) {
            rowSpan += 1
          } else {
            break
          }
        }
      }
      item.rowSpan = rowSpan
    } else {
      item.rowSpan = 0
    }

    return item
  })
}

// 记录-表格编辑
const preInvoicingEdit = key => {
  contractState.editableData[key] = cloneDeep(
    contractState.preInvoicingDataSource.filter(item => key === item.key)[0]
  )
}
// 记录-表格保存
const preInvoicingSave = key => {
  Object.assign(
    contractState.collectionRecordsDataSource.filter(item => key === item.key)[0],
    contractState.editableData[key]
  )
  delete contractState.editableData[key]
}
// 记录-表格取消保存
const preInvoicingCancel = key => {
  delete contractState.editableData[key]
}
// 记录-表格删除
const preInvoicingDelete = index => {
  contractState.invoicingData.splice(index, 1)
}
// 记录-回款记录-表格编辑
const handleCollectionDataEdit = key => {
  contractState.edicollectionData[key] = cloneDeep(
    contractState.collectionRecordsDataSource.filter(item => key === item.key)[0]
  )
}
// 记录-回款记录-表格保存
const handleCollectionDataSave = key => {
  Object.assign(
    contractState.collectionRecordsDataSource.filter(item => key === item.key)[0],
    contractState.edicollectionData[key]
  )
  delete contractState.edicollectionData[key]
}
// 记录-回款记录-表格取消保存
const handleCollectionDataCancel = key => {
  delete contractState.edicollectionData[key]
}
// 记录-回款记录-表格删除
const handleCollectionDataDelete = index => {
  contractState.invoicingData.splice(index, 1)
}
// 预开票-表格编辑
const handleInvoicingEdit = key => {
  contractState.editInvoicingData[key] = cloneDeep(
    contractState.invoicingData.filter(item => key === item.key)[0]
  )
}
// 预开票-表格保存
const handleInvoicingSave = key => {
  Object.assign(
    contractState.invoicingData.filter(item => key === item.key)[0],
    contractState.editInvoicingData[key]
  )
  delete contractState.editInvoicingData[key]
}
// 预开票-表格取消保存
const handleInvoicingCancel = key => {
  delete contractState.editInvoicingData[key]
}
// 预开票-表格删除
const handleInvoicingDelete = index => {
  contractState.backPayDataSource.splice(index, 1)
}
// 回款-表格编辑
const handleBackPayEdit = key => {
  contractState.editBackPayData[key] = cloneDeep(
    contractState.backPayDataSource.filter(item => key === item.key)[0]
  )
}
// 回款-表格保存
const handleBackPaySave = key => {
  Object.assign(
    contractState.backPayDataSource.filter(item => key === item.key)[0],
    contractState.editBackPayData[key]
  )
  delete contractState.editBackPayData[key]
}
// 回款-表格取消保存
const handleBackPayCancel = key => {
  delete contractState.editBackPayData[key]
}
// 回款-表格删除
const handleBackPayDelete = index => {
  contractState.backPayDataSource.splice(index, 1)
}
// ============================ 组件事件处理方法 ============================

// ============================ 方法 ============================

// ---------------------------- 生命周期 ----------------------------
onMounted(() => {
  getContractTableData()
  getDictionaryData()
})

onUnmounted(() => {
  // 销毁定时器
  setTimeOutList.forEach(({ repeat, timer }) => {
    repeat ? clearInterval(timer) : clearTimeout(timer)
  })
})

    // ============================ 生命周期 ============================

    // ---------------------------- 数据关联处理 ----------------------------

    // ---------------------------- 表单数据同步 ----------------------------

    // ============================ 表单数据同步 ============================

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    // ============================ 数据关联处理 ============================

    // ---------------------- 不同组件自定义的处理逻辑 ---------------------

    // ====================== 不同组件自定义的处理逻辑 ======================

    // ================================定制化逻辑========================================
</script>
<style lang="less" scoped>
.page_root {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.page_root :deep(.@{ant-prefix}-spin-nested-loading),
.page_root :deep(.@{ant-prefix}-spin-container) {
  height: 100%;
}

.table-moreBtn_down {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100px;
}

.table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
  background: #ebf1ff;
}

/* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
:deep(.@{ant-prefix}-transfer-list) {
  height: 100%;
  width: 50%;
}

.body {
  background: #d6e4fd;
  padding: 16px 16px 0 16px;
}

.content-title {
  position: relative;
  font-size: 16px;
  font-weight: 800;
  left: 10px;
  margin-bottom: 5px;
  color: #000;
}

.detail-title {
  width: 90%;
  position: relative;
  font-size: 16px;
  font-weight: 800;
  left: 10px;
  margin-bottom: 20px;
  color: #000;
}

.detail-title:before {
  position: absolute;
  content: '';
  background-color: #1890ff;
  width: 4px;
  height: 16px;
  position: absolute;
  left: -10px;
  top: 75%;
  margin-top: -14px;
}

.detail-check {
  margin-top: 20px;
}

.contract-title {
  height: 32px;
  position: relative;
  font-size: 16px;
  font-weight: 800;
  left: 10px;
  margin-bottom: 5px;
  color: #000;
}

.btn-top {
  color: #1890ff;
  border-color: #1890ff;
}

/deep/.ant3-table-row-indent+.ant3-table-row-expand-icon {
  display: none;
}

table {
  border-collapse: collapse;
  width: 940px;
  height: 150px;
  margin-bottom: 20px;
}

th {
  width: 125px;
}

th:nth-child(-n + 14) {
  background-color: #efefef;
}

th,
td {
  border: 1px solid #404040;
  padding: 8px;
}

.statistics-table {
  margin: 0 auto;
  width: 550px;
}

.statistics-table th {
  width: 145px;
}

/deep/ .ant3-picker {
  width: 100%;
}

/deep/ .ant3-form-item-control-input {
  width: 90%;
}

.detail-note {
  margin-top: 20px;
}

.detail-body {
  height: 100%;
  overflow-y: auto;
}

.record-body {
  height: 100%;
  overflow-y: auto;
}

/deep/ .ant3-btn {
  border-radius: 5px;
}

.ant3-table-thead>tr>th,
/deep/.ant3-table-thead>tr>th,
/deep/.aps-table-thead>tr>th {
  background-color: #f5f5f5;
  color: #000;
  font-weight: 600;
  padding: 14px 20px;
}</style>
